<template>
	<view class="container" :style="role === 'user' ? 'flex-direction: row-reverse;' : ''"
		v-if="role === 'user' || role === 'assistant'">
		<!-- <MDParserHighlight :resource="content" :style="role === 'user' ? 'background-color: #95EC69;' : 'background-color: #F1F2F2;'" /> -->
		<markdown :source="content" :role='role' />
		<uni-icons style="margin: 0 10px;" :color="color" :type="status" size="20" />
	</view>
</template>

<script>
	import MDParserHighlight from '../cmder-MDParserHighlight/index.vue';
	import markdown from '../ua2-markdown/ua-markdown.vue';
	export default {
		props: {
			role: {
				type: String,
				default: 'user'
			},
			content: {
				type: String,
				default: 'content'
			},
			state: {
				type: Number
			}
		},
		name: "chat",
		computed: {
			status() {
				const state = this.state
				if (state === 0) return 'spinner-cycle'
				else if (state === 1) return 'checkmarkempty'
				else if (state === -1) return 'info'
			},
			color() {
				const state = this.state
				if (state === 0) return '#c8c8c8'
				else if (state === 1) return '#5cb85c'
				else if (state === -1) return '#f0ad4e'
			}
		},
		components: {
			MDParserHighlight,
			markdown
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		margin-bottom: 10px;
		align-items: center;

		view {
			border-radius: 10px;
			padding: 10px;
			max-width: 90%;
		}
	}

	* {
		user-select: text;
		animation: fade-in 0.3s ease-out forwards;

		@keyframes fade-in {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}
	}
</style>